<script setup lang="ts">
import type { OrderSchema } from "@/types/account.types";
import { computed } from "vue";
import { useOrderTable, useOrderTableFilters } from "./Order";
import PureTablePlus from "@/components/PureTablePlus/index.vue";

defineOptions({
  name: "order"
});

const props = withDefaults(
  defineProps<{
    orders: OrderSchema[];
    height?: string | null;
    size?: "small" | "default" | "large";
    compact?: boolean;
  }>(),
  {
    height: null,
    size: undefined,
    compact: false
  }
);

const { orderColumns, tableSize } = useOrderTable(props.compact);

const { handleFilterChange, filterOrders } = useOrderTableFilters();

const filteredOrders = computed(() => filterOrders(props.orders || []));
</script>

<template>
  <div :class="['w-full', props.height ? 'h-full' : '']">
    <PureTablePlus
      row-key="vt_order_id"
      :size="props.size ?? tableSize"
      :data="filteredOrders"
      :columns="orderColumns"
      :default-sort="{ prop: 'event_time', order: 'descending' }"
      search-prop="symbol"
      search-placeholder="搜索合约"
      :height="props.height"
      @filter-change="handleFilterChange"
    />
  </div>
</template>
